<template>
    <div style="width: 75%; position: absolute;  top: 10%;left: 50%; transform: translateX(-50%);font-size:30px">
        <div class="live">
            <div class="all">
                <div class="left">
                    <video src="https://www.bilibili.com/video/BV1se411E7s4/" controls class="responsive-video"></video>
                    <br>
                    <div class="live_bottom">
                        <h1>主论坛</h1>
                    </div>
                </div>
                <div class="right">
                    <div class="tit_top">会议议程</div>
                    <div class="agenda_list">
                        <div id="wrapper1">
                            <div id="scrollOne" class="scroll">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
        <div class="common_container">
            <h1>会议推荐</h1>
            <span>Meeting recommendation</span>
        </div>
        <div class="reviewSwiper">
            <div class="swiper-container" style="position: absolute;left: 50%; transform: translateX(-50%);width: max-content;">         
                <div class="swiper-wrapper" style="transition-duration: 0ms;transform: translate3d(0px,0px,0px);">
                    <div class="swiper-slide swiper-slide-active"  >
                        <div class="ax-card-block">
                            <div class="ax-img"><a href="javascript:;" class="ax-figure" style="background-image: url(../drawable/nuan.jpg),var(--load-gif);"></a> 
                                <div class="shipin">
                                    <span class="icon-icon_video iconfont"></span>
                                    <!-- <span>观看回放</span> -->
                                </div>
                            </div> 
                            <div class="ax-title"><h1 class="ax-ell-title">主论坛</h1></div>
                            <div class="ax-des text-overflow2">主论坛</div>
                            <a href="/agendaLive?webinarId=233581462&amp;agendaId=2" class="hover link-button">立即播放</a>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-slide-next" >
                        <div class="ax-card-block"><div class="ax-img"><a href="javascript:;" class="ax-figure" style="background-image: url(https\:\/\/img2023\.gcsis\.cn\/2023\/5\/dc6fdbc88cca4305be2e11797da43d06\.jpg),var(--load-gif);"></a> 
                            <div class="shipin"><span class="icon-icon_video iconfont"></span> 
                                <!-- <span>观看回放</span> -->
                            </div>
                        </div>
                        <div class="ax-title">
                            <h1 class="ax-ell-title">数字中国&amp;安全治理论坛</h1>
                        </div> 
                        <div class="ax-des text-overflow2">数字中国&amp;安全治理论坛</div> 
                        <a href="/agendaLive?webinarId=852313832&amp;agendaId=6" class="hover link-button">立即播放</a>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-slide-end">
                        <div class="ax-card-block">
                            <div class="ax-img">
                                <a href="javascript:;" class="ax-figure" style="background-image: url(https\:\/\/img2023\.gcsis\.cn\/2023\/5\/9311c97475fc495999aecdb672038492\.jpeg),var(--load-gif);"></a> 
                                <div class="shipin">
                                    <span class="icon-icon_video iconfont"></span> 
                                    <!-- <span>观看回放</span> -->
                                </div>
                            </div> 
                                    <div class="ax-title">
                                        <h1 class="ax-ell-title">信创软件供应链安全论坛</h1>
                                    </div> 
                                    <div class="ax-des text-overflow2">信创软件供应链安全论坛</div> 
                                    <a href="/agendaLive?webinarId=482935250&amp;agendaId=7" class="hover link-button">立即播放</a>
                                </div>
                            </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup name="Agenda_live">
    
</script>

<style scoped>
.all{
    display: flex;
    height: fit-content;
    justify-content: space-between;
}
.left{
    width: 75%;
    background: #fff
}
.right{
    width: calc(25% - 2.8rem);
}

.aganda_list{
    height: calc(100% - 8rem);
    background: #fff;
    overflow: hidden;
}

#wrapper1{
    height: 100%;
    overflow-y: scroll;
}
.tit_top{
    font-size: 18px;
}
.live_bottom{
    background-color: #fff;
    height: 7rem;
    display: flex;
    align-items: center;
    padding: 0 4rem;
    justify-content: space-between
}
.responsive-video {  
    width: 100%;  
    height: auto;  
}  
#scrollOne{
    padding-left: 2rem;
    padding-top: 2rem;
    padding-right: 2rem;
    height: 100%;
}

.live {
    background: url(../drawable/nuan.jpg)no-repeat top center/cover;
    position: relative;
    padding-bottom: 8rem;
    width: auto;
}
.common_container{
    width: 144rem;
    max-width: 75%;
    margin: 0 auto;
    text-align: center;
}

.swiper-slide{
    flex-shrink: 0;
    /* width: 100%; */
    height: 100%;
    position: relative;
    /* -webkit-transition-property: -webkit-transform; */
    /* transition-property: -webkit-transform; */
    -o-transition-property: transform;
    /* transition-property: transform; */
    transition-property: transform,-webkit-transform;
}
.swiper-container{
    width: 100%;
    position: relative;
    
}
.swiper-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform,-webkit-transform;
    box-sizing: content-box;
    
}
.swiper-slide-active{
    width: 30%;
    margin-right: 45px;
}
.swiper-slide-next{
    width: 30%;
    margin-right: 45px;
}
.swiper-slide-end{
    width: 30%;
    margin-right: 45px;
}
</style>


